<template>
  <div class="cycle_view">
<<<<<<< HEAD
    <Jcycle :size="100" :rate="rate" :text="rateText"></Jcycle>
=======
    <Jcycle
      :size="100"
      :rate="rate"
      :text="rateText"
      :layerColor="'#07C460'"
      :fill="'#fff'"
      :color="'#0DB392'"
    ></Jcycle>
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
    <div style="margin-top: 20px">
      <button @click="AddTen">+10</button>
    </div>
  </div>
</template>

<script>
<<<<<<< HEAD
=======
// import Jcycle from "../components/2.x/cycle.vue";
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
import Jcycle from "../components/3.x/cycle.vue";
export default {
  // Vue3.x向下兼容Vue2 Vue2的代码也可以正常运行

  // 写个Vue2例子   你也可以看下我写的Vue3的代码 以后我写的会加一些注释  你写的也加一些基础的注释
  /*
    还可以暴露更多的接口给子组件 如可以自定义进度条的颜色 进度条的动画  样式写重复了优化等等......  
      总之就是一起维护  万一以后用的到呢  
  */
  components: {
    Jcycle,
  },
  data() {
    return {
      rate: 15,
    };
  },
  computed: {
    rateText() {
      return this.rate + "%";
    },
  },
  watch: {
    rate(newval) {
      if (newval > 100) {
        this.rate = this.rate - 100;
      }
    },
  },
  methods: {
    AddTen() {
      this.rate += 10;
<<<<<<< HEAD
=======
      console.log("nowCount", this.rate);
>>>>>>> b67f0d67d5bf1460ac41409680ef0adfbd9c9489
    },
  },
};
</script>

<style lang="less" scoped>
.cycle_view {
  // width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>